// 主布局组件
// 负责整个应用的布局结构，包括侧边栏导航和主内容区域
import React, { useState, useEffect } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom' // React Router相关hooks
import './MainLayout.css' // 布局样式
import img1 from '../img/images/1.jpg' // 导入logo图片
import BackToTop from '@/components/BackToTop'; // 回到顶部组件
import HelpButton from '@/components/HelpButton'; // 帮助按钮组件

// 导航项接口定义
interface NavItem {
  id: string
  label: string
  icon: string
  path: string
}

// 模板菜单配置
// 定义模板中心的菜单结构，包括分组和子菜单
const templateMenus = [
  {
    group: '模版中心', // 模板中心分组
    icon: <span className="menu-group-icon">🗂️</span>, // 分组图标
    key: 'template-center', // 分组唯一标识
    children: [ // 子菜单项
      { key: 'all', label: '全部', path: '/template/all' },
      { key: 'poster', label: '海报', path: '/template/poster' },
      { key: 'douyin', label: '抖音/小红书', path: '/template/douyin' },
      { key: 'mp', label: '公众号', path: '/template/mp' },
      { key: 'ecom', label: '电商', path: '/template/ecom' },
      { key: 'ppt', label: 'PPT/办公', path: '/template/ppt' },
      { key: 'print', label: '印刷物料', path: '/template/print' },
      { key: 'h5', label: 'H5', path: '/template/h5' },
      { key: 'social', label: '社交生活', path: '/template/social' },
      { key: 'video', label: '视频', path: '/template/video' },
      { key: 'element', label: '插画元素', path: '/template/element' },
    ]
  },
  {
    group: '团队模版', // 团队模板分组
    icon: <span className="menu-group-icon">🥤</span>,
    key: 'team-template',
    children: []
  },
  {
    group: '我的收藏', // 我的收藏分组
    icon: <span className="menu-group-icon">🤍</span>,
    key: 'my-fav',
    children: []
  }
]

// 分类与路由映射表
// 将路由路径映射到中文分类名称
const categoryMap = {
  all: '全部',
  poster: '海报',
  douyin: '抖音/小红书',
  mp: '公众号',
  ecom: '电商',
  ppt: 'PPT/办公',
  print: '印刷物料',
  h5: 'H5',
  social: '社交生活',
  video: '视频',
  element: '插画元素',
}

// 导入分类上下文，用于在组件间共享当前分类状态
import { CategoryContext } from '@/contexts/CategoryContext';

function MainLayout() {
  // 侧边栏折叠状态
  const [isCollapsed, setIsCollapsed] = useState(false)
  // 菜单组展开状态，默认展开模板中心
  const [openGroups, setOpenGroups] = useState<{ [k: string]: boolean }>({ 'template-center': true })
  const location = useLocation() // 获取当前路由位置
  const navigate = useNavigate() // 路由导航函数

  // 主导航项配置
  const navItems: NavItem[] = [
    { id: 'home', label: '首页', icon: '🏠', path: '/' },
    { id: 'template', label: '模板', icon: '📄', path: '/template' },
    { id: 'material', label: '素材', icon: '💎', path: '/material' },
    { id: 'ai-tools', label: 'AI工具', icon: '⚡', path: '/ai-tools' },
    { id: 'create', label: '创建', icon: '➕', path: '/create' },
    { id: 'my', label: '我的', icon: '👤', path: '/my' },
    { id: 'team', label: '团队', icon: '👥', path: '/team' }
  ]

  // 切换侧边栏折叠状态
  const toggleSidebar = () => {
    setIsCollapsed(prev => {
      const next = !prev;
      // 将状态同步到全局，供其他组件使用
      window.__SIDEBAR_COLLAPSED__ = next;
      window.dispatchEvent(new Event('sidebar-toggle'));
      return next;
    });
  }

  // 切换菜单组展开状态
  const toggleGroup = (key: string) => setOpenGroups(g => ({ ...g, [key]: !g[key] }))

  // 当前分类状态，用于在模板页面间同步分类选择
  const [currentCategory, setCurrentCategory] = useState('全部')

  // 路由变化时自动同步分类状态
  // 当用户在模板相关页面间切换时，自动更新当前分类
  React.useEffect(() => {
    if (location.pathname.startsWith('/template')) {
      const path = location.pathname.split('/')[2] || 'all' // 从URL路径中提取分类
      setCurrentCategory(categoryMap[path as keyof typeof categoryMap] || '全部')
    }
  }, [location.pathname])

  // 判断是否在模板页面或其子路由
  const isTemplatePage = location.pathname.startsWith('/template')

  // 监听侧边栏状态变化，同步到全局
  useEffect(() => {
    window.__SIDEBAR_COLLAPSED__ = isCollapsed;
    window.dispatchEvent(new Event('sidebar-toggle'));
  }, [isCollapsed]);

  return (
    // 提供分类上下文，让子组件可以访问和修改当前分类
    <CategoryContext.Provider value={{ currentCategory, setCurrentCategory }}>
      <div className="main-layout">
        {/* 左侧面板：包含导航栏和模板菜单 */}
        <div className="left-panel">
          {/* 主导航侧边栏 */}
          <nav className={`nav-sidebar${isCollapsed ? ' collapsed' : ''}`}>
            <ul className="nav-list">
              {/* 折叠/展开按钮 */}
              <li className="nav-item toggle-item">
                <button className="toggle-btn" onClick={toggleSidebar}>
                  <span className="hamburger-icon">☰</span>
                </button>
              </li>
              {/* 导航菜单项 */}
              {navItems.map((item) => (
                <li
                  key={item.id}
                  className={`nav-item${location.pathname === item.path ? ' active' : ''}`}
                  onClick={() => navigate(item.path)}
                  title={item.label}
                >
                  <div className="nav-content">
                    <span className="nav-icon">{item.icon}</span>
                    <span className="nav-label">{item.label}</span>
                  </div>
                </li>
              ))}
            </ul>
          </nav>

          {/* 创客贴面板：包含头部和模板菜单 */}
          <div className="chuangketie-panel">
            {/* 头部：logo + 创建按钮 + 登录 */}
            <div className="chuangketie-header">
              <div className="chuangketie-logo">
                <img className="logo-icon" src={img1} alt="logo" />
                <span className="logo-text">创客贴</span>
              </div>
              <button className="chuangketie-create-btn">
                <span className="create-btn-icon">＋</span>
                创建设计
              </button>
            </div>

            {/* 模板中心菜单：仅在模板页面显示 */}
            {isTemplatePage && (
              <div className="template-menu-panel">
                {templateMenus.map(group => (
                  <div key={group.key} className="template-menu-group">
                    {/* 分组标题，可点击展开/折叠 */}
                    <div className="template-menu-group-title" onClick={() => toggleGroup(group.key)}>
                      {group.icon}
                      <span style={{ marginLeft: 8 }}>{group.group}</span>
                      {/* 展开/折叠箭头 */}
                      {group.children.length > 0 && (
                        <span className="template-menu-arrow">{openGroups[group.key] ? '▾' : '▸'}</span>
                      )}
                    </div>
                    {/* 子菜单列表 */}
                    {group.children.length > 0 && openGroups[group.key] && (
                      <ul className="template-menu-list">
                        {group.children.map(child => (
                          <li
                            key={child.key}
                            className={`template-menu-item${currentCategory === child.label ? ' active' : ''}`}
                            onClick={() => {
                              setCurrentCategory(child.label) // 更新当前分类
                              navigate(child.path) // 导航到对应页面
                            }}
                          >
                            {child.label}
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* 主内容区域：显示路由对应的页面内容 */}
        <main className={`main-content${isCollapsed ? ' expanded' : ''}`}>
          <Outlet /> {/* 渲染子路由组件 */}
          <BackToTop /> {/* 回到顶部按钮 */}
          <HelpButton /> {/* 帮助按钮 */}
        </main>
      </div>
    </CategoryContext.Provider>
  )
}

export default MainLayout